<template>
  <el-container>
    <el-header style="height: auto; padding: 0; background: transparent">
      <el-card shadow="never">
        <el-descriptions :column="1" title="解决方案">
          <el-descriptions-item label="步骤1">
            <i class="el-icon-circle-check"></i>
            封装x-select, x-radio 组件, 支持将error, loading 状态封装在内部, 外部每次传fetch函数即可
          </el-descriptions-item>
          <el-descriptions-item label="步骤2">
            <i class="el-icon-circle-check"></i>
            抽离x-select, x-radio 组件公共部分withStore, withStore传入模板部分参数, 返回一个组件对象 withStore({template: 'xxx'})
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-header>

    <el-main style="display: flex; padding: 0; margin-top: 20px">
      <el-card shadow="never" style="flex: 1">
        <div v-if="errorForm">
          数据加载失败,请重试
          <br />
          <el-button type="text" @click="retryForm">重试</el-button>
        </div>
        <el-form v-else ref="formRef" v-loading="loadingForm" :model="form" label-width="80px" style="width: 460px" >
          <el-form-item label="活动名称" prop="region">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <x-select clearable :fetch="fetchRegion" v-model="form.region">
            </x-select>
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%" ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align:center;">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="form.time" style="width: 100%" ></el-time-picker>
            </el-col>
          </el-form-item>
           <el-form-item label="特殊资源">
            <x-radio-group v-model="form.resource" :fetch="fetchResource">
            </x-radio-group>
          </el-form-item>
          <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">立即创建</el-button>
            <el-button >重置</el-button>
          </el-form-item>
        </el-form>
        <code> form: {{ form }} </code>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import XSelect from '@/components/XSelect.vue'
import XRadioGroup from '@/components/XRadioGroup.vue'
export default {
  name: "Solution",
  components: { XSelect, XRadioGroup },
  data() {
    return {
      loadingForm: false,
      errorForm: false,
      form: {
        name: "",
        region: "",
        date: "",
        time: "",
        resource: "",
        desc: "",
      },
    };
  },
  mounted() {
    this.retryForm();
  },
  methods: {
    async retryForm() {
      try {
        this.loadingForm = true
        this.errorForm = false
        const res = await this.fetchForm();
        // throw new Error('数据加载失败')
        this.loadingForm = false
        Object.assign(this.form, res)
      } catch(error) {
        this.loadingForm = false
        this.errorForm = true
      }
    },
    fetchForm() {
      const data = {
        name: "活动1",
        region: "",
        date: "2024-9-30",
        time: "08:00:00",
        resource: "",
        desc: "活动描述~",
      }
      return new Promise((resolve, reject) => setTimeout(() => resolve(data), 1000));
    },
     fetchRegion() {
      const data = [
        { label: "区域一", value: 'shanghai' },
        { label: "区域二", value: 'beijing' },
        { label: "区域三", value: 'sichuan' },
      ];
      return new Promise((resolve, reject) => setTimeout(() => resolve(data), 3000));
    },
    fetchResource() {
      const data = [
        { label: "线上品牌商赞助", value: 'online' },
        { label: "线下场地免费", value: 'offline' },
      ]
      return new Promise((resolve, reject) => setTimeout(() => resolve(data), 3000));
    },
  },
};
</script>

<style scoped>
.el-descriptions /deep/ .el-icon-circle-check {
  color: #42b883;
  margin-right: 6px;
}
</style>
